<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="js/jquery-1.11.3.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap-datetimepicker.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="js/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
<script type="text/javascript" src="js/page.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<title>充值记录查询</title>
</head>
<body>
	<jsp:include page="navigation.jsp"></jsp:include>
	<div class="container" style="margin-left: 190px;">
		<div class="topbar-inner">
			<div class="myhead">
				<span class="crumb-name">充值记录查询</span>
			</div>
		</div>
		<form id="pageForm" action="chargerecordinfo" method="post">
			<div class="topbar-inner">
				<div class="search">
					<div class="input-group" style="float: left; width: 218px;">
						<span class="input-group-addon" id="basic-addon1">手机号：</span> <input type="text" class="form-control" name="mobile" value="${ mobile }" placeholder="手机号" aria-describedby="basic-addon1">
					</div>
					<div class="input-group" style="float: left; width: 263px; margin-left: 20px;">
						<span class="input-group-addon" id="basic-addon1">开始时间：</span> <input class="form-control" type="text" id="datetimepicker1" value="${ start_time }" name="start_time" data-date-format="yyyy-mm-dd hh:ii" readOnly />
					</div>
					<div class="input-group" style="float: left; width: 263px; margin-left: 20px;">
						<span class="input-group-addon" id="basic-addon1">结束时间：</span> <input class="form-control" type="text" id="datetimepicker2" value="${ end_time }" name="end_time" data-date-format="yyyy-mm-dd hh:ii" readOnly />
					</div>
					<button type="button" id="search_btn" onclick="search()" class="btn btn-default" style="margin-left: 20px; margin-top: 1px;">查询</button>
				</div>
			</div>

			<div style="margin: 20px 20px 20px 20px; text-align: center;">
				<table class="table table-bordered table-hover table-striped">
					<thead>
						<tr>
							<th>用户名称</th>
							<th>手机号</th>
							<th>充值金额</th>
							<th>充值时间</th>
						</tr>
					</thead>
					<tbody>
						<c:forEach items="${ list }" var="l">
							<tr>
								<td>${ l.user.user_name }</td>
								<td>${ l.user.mobile }</td>
								<td><fmt:formatNumber type="currency" value="${ l.charge_num }" /></td>
								<td><fmt:formatDate value="${ l.charge_time }" pattern="yyyy-MM-dd hh:mm:ss" type="date" dateStyle="long" /></td>
							</tr>
						</c:forEach>

					</tbody>
				</table>
				<input type="hidden" value="${ page.pageCount }" id="pageCount" name="pageCount" /> <input type="hidden" value="${ page.pageIndex }" id="pageIndex" name="pageIndex" />
				<c:if test="${ page == null }">
					<div style="font-size: larger;">暂无数据</div>
				</c:if>
				<c:if test="${ page != null && page.pageCount > 1 }">
					<ul id="pagination" class="pagination">

					</ul>
					<script type="text/javascript">
						setPage(document.getElementById("pagination"),
								parseInt($("#pageCount").val()), parseInt($(
										"#pageIndex").val()));
					</script>
				</c:if>
			</div>
		</form>
	</div>
	<script>
		$(function() {
			$('.submenu_4_1').addClass('submenu_native');
		});
		function search() {
			var mobile = $('input[name=mobile]').val().replace(/\s+/g, '');
			$('input[name=mobile]').val(mobile);
			var start_time = $('input[name=start_time]').val();
			var end_time = $('input[name=end_time]').val();
			if (start_time > end_time) {
				alert('开始时间不能大于结束时间！');
				return false;
			}

			if (mobile != '' && !isnumber(mobile)) {
				alert("请填写正确数据格式");
				return false;
			}

			if (mobile == '' || (mobile != '' && isphone(mobile))) {
				$('#pageForm').submit();
			} else {
				alert('请填写正确数据格式');
				return;
			}
		}
		$('#datetimepicker1').datetimepicker({
			language : 'zh-CN',
			autoclose : 1,
			format : 'yyyy-mm-dd',
			weekStart : 0,
			startDate : '2014-12-15',
			endDate : '2100-12-28',
			startView : 2,
			minView : 2,
			todayBtn : 1,
			todayHighlight : 1,
			keyboardNavigation : 1,
			minuteStep : 5,
			showMeridian : 1,
			forceParse : 0
		});
		$('#datetimepicker2').datetimepicker({
			language : 'zh-CN',
			autoclose : 1,
			format : 'yyyy-mm-dd',
			weekStart : 0,
			startDate : '2014-12-15',
			endDate : '2100-12-28',
			startView : 2,
			minView : 2,
			todayBtn : 1,
			todayHighlight : 1,
			keyboardNavigation : 1,
			minuteStep : 5,
			showMeridian : 1,
			forceParse : 0
		});
	</script>
</body>

</html>